<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import MicroAppPerformance from './components/MicroAppPerformance.vue'
import PasteInput from './components/PasteInput.vue'
import EditableDiv from './components/EditableDiv.vue'

// 微应用配置
const microAppConfig = {
  name: 'app1',
  url: 'http://localhost:9528',
  baseroute: '/app1'
}

// 存储子应用发送的数据
const subAppData = ref(null)

// 右键菜单状态
const contextMenu = ref({
  visible: false,
  x: 0,
  y: 0
})

// 子span的引用
const subSpanRef = ref<HTMLElement | null>(null)

// 处理右键菜单
const handleContextMenu = (event: MouseEvent) => {
  event.preventDefault()
  contextMenu.value = {
    visible: true,
    x: event.clientX,
    y: event.clientY
  }
}

// 处理复制
const handleCopy = () => {
  if (subSpanRef.value) {
    try {
      // 创建临时textarea
      const textarea = document.createElement('textarea')
      textarea.value = subSpanRef.value.textContent || ''
      textarea.style.position = 'fixed'
      textarea.style.opacity = '0'
      document.body.appendChild(textarea)
      
      // 选择并复制文本
      textarea.select()
      document.execCommand('copy')
      
      // 清理
      document.body.removeChild(textarea)
    } catch (err) {
      console.error('复制失败:', err)
    }
  }
  contextMenu.value.visible = false
}

// 处理粘贴
const handlePaste = async () => {
  if (subSpanRef.value) {
    try {
      // 尝试使用现代API
      if (navigator.clipboard && navigator.clipboard.readText) {
        const text = await navigator.clipboard.readText()
        subSpanRef.value.textContent = text
      } else {
        // 降级方案：提示用户使用快捷键
        alert('请使用键盘快捷键 Ctrl+V (Windows) 或 Command+V (Mac) 来粘贴内容')
      }
    } catch (err) {
      // 如果API调用失败，使用降级方案
      alert('请使用键盘快捷键 Ctrl+V (Windows) 或 Command+V (Mac) 来粘贴内容')
    }
  }
  contextMenu.value.visible = false
}

// 处理键盘事件
const handleKeyDown = async (event: KeyboardEvent) => {
  // 检查是否按下 Ctrl+V
  if (event.ctrlKey && event.key === 'v') {
    event.preventDefault() // 阻止默认粘贴行为
    if (subSpanRef.value) {
      try {
        // 尝试使用现代API
        if (navigator.clipboard && navigator.clipboard.readText) {
          const text = await navigator.clipboard.readText()
          subSpanRef.value.textContent = text
        }
      } catch (err) {
        console.error('粘贴失败:', err)
      }
    }
  }
}

// 点击其他地方关闭右键菜单
const closeContextMenu = () => {
  contextMenu.value.visible = false
}

onMounted(() => {
  document.addEventListener('click', closeContextMenu)
  // 添加键盘事件监听
  // document.addEventListener('keydown', handleKeyDown)
})

onUnmounted(() => {
  // 移除键盘事件监听
  // document.removeEventListener('keydown', handleKeyDown)
})

// 监听子应用发送的数据
const handleMicroAppData = (data: any) => {
  console.log('收到子应用数据：', data)
  subAppData.value = data
}
</script>

<template>
  <div class="main-app">
    <h1>主应用</h1>
    <MicroAppPerformance />
    
    <!-- 显示子应用数据 -->
    <div v-if="subAppData" class="sub-app-data">
      <h3>子应用数据：</h3>
      <pre>{{ JSON.stringify(subAppData, null, 2) }}</pre>
    </div>
    
    <micro-app 
      :name="microAppConfig.name"
      :url="microAppConfig.url"
    ></micro-app>

    <!-- <div class="app-container">
      <span contenteditable="true" class="editable-span">
        <span 
          ref="subSpanRef"
          class="sub-span"
          @contextmenu="handleContextMenu"
        >我们团队正在积极推进实施</span>
      </span>
    </div> -->

    <!-- 右键菜单 -->
    <!-- <div 
      v-if="contextMenu.visible" 
      class="context-menu"
      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
    >
      <div class="menu-item" @click="handleCopy">复制</div>
      <div class="menu-item" @click="handlePaste">粘贴</div>
    </div> -->

    <!-- 新增的可编辑div组件 -->
    <EditableDiv />

    <!-- 新增的粘贴输入组件 -->
    <PasteInput />
  </div>
</template>

<style scoped>
.main-app {
  padding: 20px;
}

.sub-app-data {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.sub-app-data pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.app-container {
  padding: 20px;
}

.editable-span {
  display: inline-block;
  min-width: 200px;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: none;
}

.editable-span:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.sub-span {
  color: #409eff;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 2px 4px;
  border-radius: 2px;
}

.sub-span:hover {
  background-color: rgba(64, 158, 255, 0.1);
  transform: scale(1.02);
}

.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.menu-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}
</style>
